<template>
  <div v-if="form.carEquipSource ==1">
    <div class="card-wrap flex-column justify-end card-padding">
      <div class="card-title-wrap">
        <span>加装信息</span>
        <span></span>
      </div>
      <div style="text-align: right;font-size: 13px;color: #7F7F7F;margin-bottom: 20px;">装饰费合计：{{format_thousand(DecorationTle)}}</div>
      <div style="box-sizing: border-box;padding-left: 20px;">
        <table-page :dataList="form.attachedVoList" border :total="0">
          <template slot="tableCol">
            <el-table-column label="装饰项" align="center" prop="decorationVal" />
            <el-table-column label="数量" align="center" prop="decorationCount" />
            <el-table-column label="装饰单项费" align="center" prop="decorationPrice" />
            <el-table-column label="说明" align="center" prop="remark" />
          </template>
        </table-page>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "GPSMessage",
  dicts: ["product_scheme_type"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    type() {
      let status;
      switch (this.state) {
        case "write":
          status = "edit";
          break;
        case "disabled":
          status = "detail";
          break;
        case "readonly":
          status = "detail";
          break;
        case "detail":
          status = "detail";
          break;
        case "edit":
          status = "edit";
        case "add":
          status = "add";
          break;
      }
      return status;
    },
    DecorationTle() {
      return (
        this.value.attachedVoList.length > 0 ?
          this.value.attachedVoList?.reduce((previousValue, currentValue) => {
            return Number(previousValue) + Number(currentValue?.decorationPriceTotle);
          }, 0) : null
      )
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
  <style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
  }
}
.app-container {
  background-color: #fff;
}
</style>
